<template>
  <div class="outer">
    <h1>Footer</h1>
    <p>count的值{{ count }}</p>
    <p>价格是{{ price }}</p>
    <h2>电影列表 <button @click="getMovieList">请求电影列表</button></h2>
    <ul>
      <li v-for="item in movieList" :Key="item.tvId">{{ item.albumName }}</li>
    </ul>
    <h2>不一样的电影列表</h2>
    <ul>
      <li v-for="item in hotMovieList" :Key="item.tvId">
        {{ item.albumName }}
      </li>
    </ul>
    <h2>我的电影列表</h2>
    <ul>
      <li v-for="item in myMovieList" :Key="item.tvId">
        {{ item.albumName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "Footer",
  computed: {
    ...mapState("count",{
      count: "count",
      price: "price",
      movieList: "movieList",
    }),
    ...mapGetters("count",["hotMovieList"]),
    //我的电影列表
    myMovieList() {
      return this.$store.getters["count/myMovieList"]({ start: 2, end: 3 })
    },
  },
  methods: {
    ...mapActions("count",["getMovieList"]),
  },
};
</script>

<style scoped>
.outer {
  background-color: #ddd;
}
</style>